<script>
export default {
  name: 'DashTableBody',
  props: {
    columns: {
      type: Array,
      default() {
        return [];
      },
    },
    data: {
      type: Array,
      default() {
        return [];
      },
    },
    rowStyle: {
      type: Object,
      default() {
        return {};
      },
    },
    stripe: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed: {
    style() {
      return {
        top: `${this.$parent.columnStyle.height}px`,
      };
    },
    tableClass() {
      return {
        vscroll: this.$parent.showVerticalScrollBar,
        highlight: this.$parent.highlight,
      };
    },
    cellStyle() {
      return {
        borderRightColor: this.rowStyle.verticalBorderColor,
        borderRightWidth: `${this.rowStyle.verticalBorderWidth}px`,
        borderRightStyle: this.rowStyle.verticalBorderStyle,
        borderBottomColor: this.rowStyle.horizenBorderColor,
        borderBottomWidth: `${this.rowStyle.horizenBorderWidth}px`,
        borderBottomStyle: this.rowStyle.horizenBorderStyle,
      };
    },
  },
  methods: {
    getRowStyle(idx) {
      let rowColor =
        this.stripe.show && idx % 2 == 1 ? this.stripe.color : this.rowStyle.backgroundColor;
      return {
        height: `${this.rowStyle.height}px`,
        fontSize: `${this.rowStyle.fontSize}px`,
        color: this.rowStyle.color,
        backgroundColor: rowColor,
        fontWeight: this.rowStyle.fontWeight,
        textAlign: this.rowStyle.textAlign,
      };
    },
  },
};
</script>
<template>
  <div
    :style="style"
    class="dash-table-rows">
    <table
      :class="tableClass"
      cellspacing="0"
      cellpadding="0"
      border="0">
      <colgroup>
        <col
          v-for="(item,index) in columns"
          :key="index"
          :width="item._width"/>
      </colgroup>
      <tbody>
        <tr
          v-for="(row,rIdx) in data"
          :key="rIdx"
          :style="getRowStyle(rIdx)">
          <td
            v-for="(column,cIdx) in columns"
            :key="cIdx"
            :style="cellStyle">{{ row[column.key] }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<style lang="less">
.dash-table-rows {
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  table {
    table-layout: fixed;
    width: 100%;
    tr {
      transition: all 0.3s;
    }
    &.highlight tr:hover {
      background-color: #ebf7ff !important;
    }
    &.vscroll tr:last-child td {
      border-bottom: 0;
    }
    td {
      height: 32px;
      padding: 0 5px;
      border-collapse: collapse;
      white-space: nowrap;
      overflow: hidden;
      word-break: keep-all;
      &:last-child {
        border-right: 0 !important;
      }
    }
  }
}
</style>
